// 透明表单
$transparent-height: .5rem;
$transparent-color: $primary--color-0-1;
$transparent-color-error: #FF5722;
$transparent-color-focus: #E0E0E0;
$transparent-color-tip: #FFA25B;


.transparent-form{
    width: 100%;
    .el-form-item.el-form-item--medium{
        margin-bottom: 0;
    }
    .el-button.el-button--medium{
        border-radius: .15rem;
        height: $transparent-height;
        font-size: .18rem;
        background-color: transparent;
        border-color: transparent;
    }
    .cf__group{
        position: relative;
        .cf__group-info{
            width: 100%;
            &.flex{
                @include flexLayout(flex,normal,center);
            }
            &.flex-end{
                @include flexLayout(flex,right,center);
            }
        }
        .cf__group-tips{
            z-index: 2;
            line-height: 1.4;
            font-size: .14rem;
            word-break: break-all;
            color: $transparent-color-tip;
            transition: color .3s linear;
            padding: .1rem .1rem 0;
        }
        .el-input--medium .el-input__inner{
            color: $transparent-color-focus;
            line-height: $transparent-height;
            height: $transparent-height;
            background-color: transparent;
            border-radius: .15rem;
            padding-left: .7rem;
            @include inputPlaceholder($transparent-color);
        }

        .el-input--medium .el-input__inner:focus{
            color: $transparent-color-focus;
        }
        &.error{
            .cf__group-tips{
                color: $transparent-color-error;
            }
            .el-input__inner{
                border-color: $transparent-color-error;
            }
        }
    }
}


// 自定义表单
$custom-height: .4rem;
$custom-color: $primary--color-0-1;
$custom-color-error: #FF5722;
$custom-color-focus: $primary--color-3;
.custom-form{
    width: 100%;
    padding: 0 .3rem;
    .el-form-item.el-form-item--medium{
        margin-bottom: 0;
        &.position-left{
            @include flexLayout(flex,normal,normal);
            .el-form-item__label{
                flex: 0 0 auto;
            }
            .el-form-item__content{
                padding-left: .1rem;
                flex: 1;
                width: 100%;
            }
        }
    }
    .el-form-item--medium .el-form-item__label{
        line-height: $custom-height;
    }
    .cf__group{
        padding-bottom: 30px;
        position: relative;
        .cf__group-info{
            width: 100%;
            &.flex{
                @include flexLayout(flex,normal,center);
            }
        }
        .cf__group-tips{
            position: absolute;
            font-size: 12px;
            bottom: 0;
            left: 0;
            z-index: 2;
            height: 30px;
            transform-origin: 0 50%;
            transform: scale(1);
            color: $custom-color-focus;
            transition: color .3s linear;
            line-height: 30px;
        }
        .el-textarea.el-input--medium,
        .el-date-editor.el-input,
        .el-textarea.el-input--medium .el-textarea__inner,
        .el-input--medium .el-input__inner{
            color: $custom-color-focus;
            background-color: transparent;
            width: 4rem;
            font-size: .14rem;
            @include inputPlaceholder($custom-color);
        }
        .el-textarea.el-input--medium .el-textarea__inner{
            padding-bottom: .36rem;
        }
        .el-textarea.el-input--medium .el-input__count{
            bottom: .01rem;
            padding: 0 .1rem;
        }
        .el-input__count
        .el-button{
            padding-top: .12rem;
            padding-bottom: .12rem;
        }
        .el-switch{
            padding-top: .02rem;
        }
        .el-input--medium .el-input__inner{
            height: $custom-height;
            line-height: $custom-height;
            @include inputPlaceholder($custom-color);
        }

        .el-input--medium .el-input__inner:focus{
            color: $custom-color-focus;
        }
        .el-range-editor--medium.el-input__inner{
            height: $custom-height;
            .el-range-separator{
                width: 10%;
            }
        }

        &.error{
            .cf__group-tips{
                color: $custom-color-error;
            }
            .el-input__inner{
                border-color: $custom-color-error;
            }
        }
    }
}




.page-transition-slide-in-right-enter-active {
    animation: page-transition-slide-in-right-enter $default-transition-duration both $default-transition-timing;
}
@keyframes page-transition-slide-in-right-enter {
    0% {
        transform: translateX(20px);
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* 离开过渡的状态 */
.page-transition-slide-in-right-leave-active {
    animation: page-transition-slide-in-right-leave $default-transition-duration both $default-transition-timing;
}
@keyframes page-transition-slide-in-right-leave {
    0% {
        opacity: 1;
    }

    100% {
        transform: translateX(-20px);
        opacity: 0;
    }
}
.page-transition-slide-in-top-enter-active {
    animation: page-transition-slide-in-top-enter $default-transition-duration both $default-transition-timing;
}
@keyframes page-transition-slide-in-top-enter {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* 离开过渡的状态 */
.page-transition-slide-in-top-leave-active {
    animation: page-transition-slide-in-top-leave $default-transition-duration both $default-transition-timing;
}
@keyframes page-transition-slide-in-top-leave {
    0% {
        opacity: 1;
    }

    100% {
        transform: translateY(-20px);
        opacity: 0;
    }
}


// 页面单独样式配置
.custom-page-box {
    .page-base-body {
        background: transparent!important;
    }
}
.custom-tabs-box {
    position: relative;
    height: 100%;
    .btn-box {
        position: absolute;
        right: 20px;
        top: 10px;
    }
    .btn-area {
        position: absolute;
        right: 20px;
        top: 6px;
        .el-button + .el-button {
            margin-left: 20px;
        }
}
    .el-tabs {
        height: 100%;
    }
    .el-tabs__header {
        background: #fff;
        margin-bottom: 10px;
        padding: 0 20px 0 30px;
    }
    .el-tabs__nav {
        .el-tabs__item {
            height: 48px;
            line-height: 48px;
            &.is-disabled {
                color: #303133!important;
            }
            &.is-active {
                color: #de2728!important;
            }
        }
    }
    .el-tabs__nav-wrap::after {
        background: transparent;
    }
}

.pbb__table {
    .pbb__table-thead {
        background: #F7F7F7;
        line-height: 22px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
        .cell {
            font-size: 14px;
            font-family: "PingFang SC";
            line-height: 22px;
            font-weight: bold;
            color: #37383a;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
    .pbb__table-thead-cell {
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
        line-height: 22px;
        padding: 8px 0;
        .cell {
            font-size: 14px;
            font-family: "PingFang SC Medium";
            line-height: 22px;
            color: #37383a;
            .other-span {
                display: block;
                width: 100%;
                line-height: 22px;
                height: 22px;
                @include textEllipsis();
            }
            .el-button {
                font-size: 14px!important;
                color: #fff;
                &:hover {
                    color: #fff;
                }
                span {
                    font-family: "PingFang SC Medium";
                }
            }
            .el-button.el-button--text {
                color: #2c82c9;
                &:hover {
                    color: #5f8fb7;
                }
            }
            .el-link {
                font-size: 14px!important;
                color: #2c82c9;
                &:hover {
                    color: #5f8fb7;
                }
            }
        }
        &.is-center {
            .cell {
                display: block;
                align-items: unset;
            }
        }
    }
}

.el-table::before {
    display: none;
}
.form-template-edit {
    width: 100%;
    min-width: 850px;
    padding: 24px 30px;
    border-radius: 4px;
    background: #fff;
    @include flexLayout(flex,justify,normal);
    flex-wrap: wrap;
    .control-item-name {
        @include textEllipsis();
        font-size: 16px;
        font-family: "PingFang SC Medium";
        line-height: 22px;
        color: #37383a;
        margin-bottom: 14px;
        display: inline-block;
        &.is_required:before {
            content: "*";
            color: #de2728;
            margin-right: 4px;
        }
    }
    .fill-form-collapse {
        width: 100%;
        border-radius: 4px;
        border: 1px solid #C7CAD3;
        margin-bottom: 10px;
        .el-collapse {
            border-top: 0;
        }
        .el-collapse-item.is-active {
            .el-collapse-item__wrap {
                border-bottom-color: transparent;
            }
        }
        .el-collapse-item__header {
            margin: 0 12px;
            .control-item-name {
                @include textEllipsis();
                margin-bottom: 0;
            }
        }
        .el-collapse-item__header.is-active {
            border-bottom-color: #EDEFF2;
        }
        .el-collapse-item__content {
            @include flexLayout(flex,justify,normal);
            flex-wrap: wrap;
            padding: 10px 12px;
        }
        .el-collapse-item__wrap {
            border-color: #C7CAD3;
        }
    }
    .fill-form-table {
        width: 100%;
        margin-bottom: 10px;
        .fill-form-table-item {
            width: 100%;
            .date-picker {
                width: 100%;
            }
            .custom-file-list {
                li {
                    width: 100%;
                    margin-right: 0;
                }
            }
        }
    }
    .fill-form-item {
        width: 48%;
        padding: 12px 0 12px;
        border-radius: 8px;
        border: 1px solid transparent;
        margin-bottom: 10px;
        .form-item-input {
            width: 100%;
            textarea {
                background: transparent;
            }
        }
    }
    &.onlyData {
        .fill-form-item {
            @include flexLayout(flex,normal,normal);
            .onlyData-span {
                display: inline-block;
                margin-left: 8px;
                img {
                    display: inline-block;
                    width: 100px;
                    cursor: pointer;
                }
            }
        }
    }
    &.wechat {
        min-width: unset;
        width: 100%;
        padding: 0;
        .fill-form-item {
            width: 100%;
            background: #fff;
            padding: 10px 0;
            border-radius: 0;
        }
        .form-wechat-table {
            width: 100%;
            border: 1px solid #C7CAD3;
            border-radius: 4px;
            padding: 0 14px 14px;
            margin-bottom: 10px;
            & > .control-item-name {
                @include textEllipsis();
                font-size: 16px;
                font-family: "PingFang SC";
                line-height: 44px;
                color: #37383a;
                text-align: center;
                border-bottom: 1px solid #C7CAD3;
            }
            .add-btn {
                width: 100%;
            }
        }
        .control-item-name {
            @include textEllipsis();
            width: 100%;
            margin-bottom: 6px;
            font-size: 16px;
            font-family: "PingFang SC Medium";
            line-height: 22px;
            color: #37383a;
        }
        .fill-form-collapse {
            .el-collapse-item__header {
                margin: 0;
                padding: 0 10px;
            }
        }
    }
}

.cell {
    .control-item-name {
        margin-bottom: 0;
    }
}

// 头部有名称描述，按钮的
.task-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    margin-bottom: 10px;
    background: #fff;
    .title {
        p {
            margin: 0;
            &.name {
                font-size: 16px;
                font-family: "PingFang SC Medium";
                line-height: 22px;
                color: #2C82C9;
                margin-bottom: 13px;
                span {
                    line-height: 20px;
                    background: #2C82C9;
                    opacity: 1;
                    border-radius: 11px;
                    font-size: 12px;
                    padding: 0 10px;
                    font-family: "PingFang SC Medium";
                    color: #F7F7F7;
                    margin-left: 10px;
                    &.finish {
                        display: inline-block;
                        height: 20px;
                        background: #32A78F;
                        line-height: 20px;
                    }
                }
            }
            &.description {
                font-size: 16px;
                font-family: "PingFang SC Medium";
                line-height: 22px;
                color: #37383a;
            }
        }
    }
}

.singe-line-select {
    .el-select__tags {
        overflow: hidden;
        & > span {
            display: flex!important;
            justify-content: flex-start;
            align-items: center;
        }
    }
}

.step-import {
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid #a5a5a5;
    position: relative;
    &:before {
        content: "1";
        display: block;
        position: absolute;
        top: 0;
        left: -9px;
        width: 18px;
        text-align: center;
        line-height: 18px;
        font-size: 12px;
        color: #fff;
        background: #de2728;
        border-radius: 50%;
    }
    &:after {
        content: "2";
        display: block;
        position: absolute;
        bottom: 0;
        left: -9px;
        width: 18px;
        text-align: center;
        line-height: 18px;
        font-size: 12px;
        color: #fff;
        background: #de2728;
        border-radius: 50%;
    }
    .step1 {
        border-bottom: 1px solid #a5a5a5;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
}
